<template>
    <div class="">
        <el-dialog width="800px" title="录入学生考勤" :visible.sync="state" :show-close="true" :close-on-click-modal="false">
            <div class="components_searchs">
                    <span class="tit">学号：</span>
                     <el-input v-model="table.queryParams.studentNumber" auto-complete="off">
                     </el-input>

                    <span class="tit">姓名：</span>
                    <el-input v-model="table.queryParams.name" auto-complete="off">
                    </el-input>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="queryTable">查询</el-button>
                <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </div>

            <div class="components_btns clearfix">
                <div class="fl">
                    <el-upload
                                ref="scoreUpload"
                                class="components_upload"
                                :action="uploadUrl"
                                accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                                :limit="1"
                                :headers="upload.headers"
                                :on-change="handleUploadChange"
                                :on-success="handleSuccess"
                                :on-remove="handleRemove"
                                >
                                <el-button size="small" type="primary">选择文件</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传模版文件</div>
                    </el-upload>
                </div>
                 <div class="fr">
                    <a href="javascript: void(0);" class="link_txt" @click="downloadExcel">下载导入模板</a>
                </div>
            </div>
            <div class="el-table el-table--fit el-table--border el-table--enable-row-transition">

                <div class="el-table__header-wrapper">
                    <table>
                        <thead>
                            <tr>
                                <th style="width:40px">序号</th>
                                <th style="width:120px">学号</th>
                                <th style="width:100px">姓名</th>
                                <th style="width:150px">考勤状态</th>
                                <th style="width:150px">课堂表现分</th>
                                <th>备注</th>
                                <th class="gutter" width="17px"></th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <div class="el-table__body-wrapper components_table_body_wrapper" style="max-height: 255px;">

                    <table class="el-table__body">
                        <tbody>
                            <tr v-for="(item, index) in table.dataList" v-show="!item.isHidden">
                                <td style="width:40px">
                                    {{ index + 1}}
                                </td>
                                <td style="width:120px">
                                    {{ item.studentNumber }}
                                </td>
                                <td style="width:100px">
                                    {{ item.name }}
                                </td>
                                <td style="width:150px">
                                    <el-select v-model="item.status" clearable size="mini" style="width:90px">
                                        <el-option
                                            v-for="item in classStatesList"
                                            :key="item.id"
                                            :label="item.text"
                                            :value="item.id">
                                        </el-option>
                                    </el-select>
                                </td>
                                <td style="width:150px">
                                    <el-input-number v-model="item.score" :min="-3" :max="3" size="mini" style="width:90px">
                                    </el-input-number>
                                </td>
                                <td>
                                    <el-input v-model="item.remark" auto-complete="off" :maxlength="50">
                                    </el-input>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submit" size="small">确 定</el-button>
                <el-button @click="state = false" size="small">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {enums} from '@/constant'
    import {config} from '@/config'
    export default {
        components: {
        },
        data() {
            return {
                self: this,
                state: false,
                lessonId: null,
               // studentScoreList: null,    // 需要保存的数据
                // 考勤状态枚举
                classStatesList: enums.CLASSROOM_STATUS,
                table:{
                    dataList: null,   // 表格数据
                    queryParams: {
                        name:null,  //学生名称
                        studentNumber: null   //学号
                    }
                },
                upload:{
                    headers:{"Authorization": localStorage.getItem("userToken")},
                    url: config.BASE_URL + api.studentClassroomScore.importExcel
                },
                //uploadUrl: "",
            }
        },
        created() {
        },
        mounted() {},
        computed: {
            'uploadUrl':function(){
                return config.BASE_URL + api.studentClassroomScore.importExcel + this.lessonId;
            }
        },
        methods: {
            // 打开模态框
            showDialog(id){
                this.lessonId = id;
                // this.upload.url += this.lessonId;
                // 查询学生列表
                this.getStudentList();
                this.state = true;
                this.table.queryParams.studentNumber = null;
                this.table.queryParams.name = null;
            },
            // 获取学生数据
            getStudentList() {
                let vm = this;
                vm.axios.get(api.studentClassroomScore.queryStudentList,{
                    params:{
                        lessonId : vm.lessonId
                    }
                }).then((response) => {
                    if (response.data.success) {
                        // this.studentScoreList = JSON.parse(JSON.stringify(response.data.data));
                        // 填充表格数据
                        vm.table.dataList = JSON.parse(JSON.stringify(response.data.data.studentCLassroomScoreVOS));
                        vm.table.dataList.forEach((item)=>{
                            vm.$set( item, "isHidden", false );
                            if(item.status == null){
                                vm.$set( item, "status", 0 );
                            }
                            if(item.score == null){
                                vm.$set( item, "score", 0 );
                            }
                            if(item.remark == null){
                                vm.$set( item, "remark", "" );
                            }
                        })
                        // console.log(vm.table.dataList)
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            submit(){
                let vm = this;
                if(_.isEmpty(vm.table.dataList)){
                    vm.$message({
                        type: 'warn',
                        message: "提交数据为空！",
                    });
                    return;
                }
                // 处理数据
                vm.table.dataList.forEach((item)=>{
                    delete item.createTime;
                    delete item.updateTime;
                    item["lessonId"] = vm.lessonId;
                })
                // console.log(vm.table.dataList);
                //return;
                vm.axios.post(api.studentClassroomScore.add, vm.table.dataList)
                    .then((response) => {
                        if (response.data.success) {
                            vm.$message({
                                type: 'success',
                                message: response.data.msg,
                            });
                            // 关闭弹出窗口
                            vm.state = false;
                            // 刷新table
                            vm.$parent.$refs.classTable.$emit('vuetable:refresh');
                        } else {
                            vm.$message.error(response.data.msg);
                        }
                })
            },
            queryTable(){
                let vm = this;
                // 学号不为空
                let numberCondition = vm.table.queryParams.studentNumber != null
                        && vm.table.queryParams.studentNumber !== "";
                // 名称不为空
                let nameCondition = vm.table.queryParams.name != null
                        && vm.table.queryParams.name !== "";
                // 学号 && 名称查询
                if(numberCondition && nameCondition){
                    vm.table.dataList.forEach((item,index)=>{
                        if(item.studentNumber.indexOf(vm.table.queryParams.studentNumber) > -1
                            && item.name.indexOf(vm.table.queryParams.name) > -1){
                            item.isHidden = false;
                        }else{
                            item.isHidden = true;
                        }
                    })
                }else if(nameCondition){     //名称查询
                    vm.table.dataList.forEach((item,index)=>{
                        if(item.name.indexOf(vm.table.queryParams.name) > -1){
                            item.isHidden = false;
                        }else{
                            item.isHidden = true;
                        }
                    })
                }else if(numberCondition){     //学号查询
                    vm.table.dataList.forEach((item,index)=>{
                        if(item.studentNumber.indexOf(vm.table.queryParams.studentNumber) > -1){
                            item.isHidden = false;
                        }else{
                            item.isHidden = true;
                        }
                    })
                }
            },
            resetQuery(){
                this.table.queryParams.studentNumber = null;
                this.table.queryParams.name = null;
                this.table.dataList.forEach((item) => {
                    item.isHidden = false;
                })
            },
            // 上传change事件
            handleUploadChange(file, fileList){
                // 校验文件名 过滤文件
                if(file.name.indexOf(".xlsx") == -1){
                    this.$message.error("只能上传培养方案模版Excel文件");
                    fileList.splice(0,fileList.length);
                    return;
                }
               /*  // 设置数据
                this.form.uploadFile = file.raw;
                fileList.splice(0,fileList.length);
                fileList.push(file); */
            },
            handleSuccess(response, file, fileList){
                let vm = this;
                vm.$nextTick(function(){
                    // 清空上传文件
                    vm.$refs.scoreUpload.clearFiles();
                })

                if(response.success){
                    vm.$message({
                        type: 'success',
                        message: response.msg,
                    });
                    // 刷新表格
                    vm.getStudentList();
                }else{
                    vm.$message.error(response.msg);
                }
            },
            // 移除文件
            handleRemove(file, fileList) {
                // this.form.uploadFile = null;
            },
            // 下载
            downloadExcel(){
                let href = config.BASE_URL + api.studentClassroomScore.downloadExcel;
                href += "?Authorization=" + localStorage.getItem("userToken");
                window.location.href = href;
            },
        },
    };
</script>
<style scoped>
table {
    width: 100%;
}
table td,table th{
    font-size: 12px;
    border: 1px solid #DADADA;
    text-align: center;
    vertical-align: middle;
}
table th{
    background: #F7F7F7;
}
.el-input{ padding:0 10px; }
.el-table tr td:last-child{
    border-right: 1px solid #DADADA;
}
/* table,tr,td{
    font-size: 12px;
    border: 1px solid #dadada;
    color: #666;
}
table{
    width: 100%;
}
td{
    text-align: center;
    vertical-align: middle;
}
thead th{
    text-align: center;
    font-weight: bold;
    background: #fbfbfb;
}
tbody tr:nth-child(2n) td{
    background: #f9f9f9;
}*/
</style>